<template>
  <view class="cu-bar tabbar fixedposition">
    <view class="action" @click.stop="navTo(item.pagePath)" v-for="(item,index) in routerList" :key="index">
      <view v-if="item.id==5">
        <view class="cuIcon-cu-image" @click.stop="scan">
          <image :src="current==item.id?item.selectedIconPath:item.iconPath" mode="widthFix"
            style="width: 140upx;height: 140upx;position: relative;top: -36upx;"></image>
        </view>
      </view>
      <view v-else>
        <view class="cuIcon-cu-image">
          <image style="width:40upx;height: 40upx;" :src="current==item.id?item.selectedIconPath:item.iconPath" mode="heightFix"></image>
        </view>
        <view :class="current==item.id?'text-blue':'text-index'" style="line-height: 36upx;font-size: 24upx;">{{item.text}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
  } from 'vuex';
  export default {
    props: {
      current: {
        type: [Number, String],
        default: 1
      }
    },
    computed: {
      ...mapState(['wdnumber', 'hasLogin']),
    },
    data() {
      return {
        routerList: [{
            id: 1,
            "text": "首页",
            "pagePath": "/pages/index/index?ishow=1",
            "iconPath": "/static/tab/tab_01.png",
            "selectedIconPath": "/static/tab/tab-current_01.png",
          },
          {
            id: 4,
            "text": "我的",
            "pagePath": "/pages/person/index",
            "iconPath": "/static/tab/tab_04.png",
            "selectedIconPath": "/static/tab/tab-current_04.png",
          }
        ],
        num: null
      };
    },
    methods: {
      navTo(url) {
        uni.redirectTo({
          url
        })
      },
      scan(e) {
        console.log(e)
      }
    },
    mounted() {}
  }
</script>

<style>
  .fixedposition {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 998;
    height: 112upx;
    background: #FFFFFF;
    border-top: 1px solid rgba(231, 231, 231, 1);
    backdrop-filter: blur(12px);
  }

  .boxShowTop {
    box-shadow: 0 10upx 40upx 5upx rgba(128, 135, 143, 0.14);
  }
</style>